<template>
  <div class="box">
    <el-button type="success" @click="back" class="btns">返回</el-button>
    <div class="content">
        <el-form ref="form" :model="sizeForm" :rules="formRules" label-width="80px" size="medium">
            <el-form-item label="文章名称" prop="name">
                <el-input v-model="sizeForm.name"></el-input>
            </el-form-item>
            <el-form-item label="文章内容" prop="txt">
                <el-input
                    type="textarea"
                    :autosize="{ minRows: 20, maxRows: 20}"
                    placeholder="请输入内容"
                    v-model="sizeForm.txt">
                </el-input>
            </el-form-item>
            <div class="btn">
                <el-button type="primary" round @click="post">确认修改</el-button>
            </div>
    </el-form>
   </div>
   <!-- 发布成功对话框 -->
   <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <span>文章修改成功</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="back">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import http from '@/util/http'
import { Message } from 'element-ui'

export default {
  mounted () {
    this.render()
  },
  data () {
    return {
      sizeForm: {
        token: window.localStorage.getItem('token'),
        name: '',
        txt: '',
        aid: ''
      },
      dialogVisible: false,
      formRules: {
        name: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        txt: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      msg: this.$route.params
    }
  },
  methods: {
    back () {
      this.$router.back()
      this.dialogVisible = false
    },
    post () {
      this.$refs.form.validate(valid => {
        if (valid) {
          http.post('/api/art/updata', this.sizeForm).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = true
            }
          })
        } else {
          Message.error('请输入文章标题或内容')
        }
      })
    },
    render () {
      http.put('/api/art/updata', this.msg).then(res => {
        if (res.data.code === 1) {
          this.sizeForm.name = res.data.info.header
          this.sizeForm.txt = res.data.info.content
          this.sizeForm.aid = res.data.info.aid
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    background-image: url('@/assets/post.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
    .content{
        position: relative;
        padding: .625rem;
        margin: auto;
        width: 75rem;
        height: 80vh;
        opacity: .9;
        background-color: white;
        border-radius:1.25rem ;
        .btn{
            position: absolute;
            bottom: 5%;
            right: 5%;
        }
    }
}
.btns{
    position: absolute;
    top: .625rem;
    left: .625rem;
}
</style>
